<template>
   <div class="index">
      <div class="mian-view">
         <el-menu class="el-menu-vertical-demo" default-active="0" @open="handleOpen" @close="handleClose">
            <el-sub-menu :index="`${index}`" v-for="(item, index) in menuList " :key=index>
               <template #title>
                  <span class="menu-title">{{ item.title }}</span>
               </template>
               <el-menu-item :index="`${index}`" v-for="(child, index) in item.children" :key="index"
                  @click="toPath(child)">{{
                  child.title
                  }}</el-menu-item>
            </el-sub-menu>
         </el-menu>
         <div class="right-view">
            <div class="header"></div>
            <router-view></router-view>
         </div>
      </div>

   </div>
</template>

<script lang="ts" setup>
import { RouterView, useRouter } from "vue-router";
import toolData from "./script"
const router = useRouter()
const { handleOpen, handleClose, isCollapse, menuList, toPath,path } = toolData
router.push({path})
</script>
<style lang="scss">
.mian-view {
   display: flex;
   .right-view{
      width: 100%;
   }
   .header {
      height: 60px;
      background: blue;
      flex: 1;
   }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
   min-height: 400px;
}

.menu-title {
   // width: 64px;
   // height: 16px;
}
</style>